<template>
    <div class="playlist-picture">
        <img src="https://p1.music.126.net/HakWG76Brh_PvR43vQGWiw==/109951168305062498.jpg?param=140y140">
    </div>

    <!-- <el-button type="success" round> 全部歌单> </el-button> -->

    <div class="playlist-content">
        <span v-for="item in playListData" :key="item.id" @click="clickHandler(item.name)">{{ item.name }}</span>
    </div>

    <!-- <el-card hoverable v-for="info in playlisttop" :key="info.id" class="playlist-box">
        <img :src="info.coverImgUrl" class="image" />

        <div style="padding: 14px">
            <span>{{ info.name }}</span>
        </div>

        <div class="playlist-imgbox-icon">
            <span></span>
        </div>

    </el-card> -->
    <Recommend>
		<template #list>
			<Resourcelist :resourcelist="playlisttop"></Resourcelist>
		</template>
	</Recommend>
</template>

<script setup lang="ts">
import { getPlayListApi, getPlayListtopApi, getPlayListHotApi } from '@/api/playlistApi'
import { ref, onMounted } from 'vue'
import type { ITags, IPlay } from '@/api/playlistApi';
import Recommend from '@/components/resource.vue'

const playListData = ref<ITags[]>([])
const playlisttop = ref<IPlay[]>([])


const getplaylist = async () => {
    try {
        const res = await getPlayListApi()
        console.log('res', res);
        res.tags.forEach(item => {
            playListData.value.push({ id: item.id, name: item.name })
        })

        // console.log('playListData',playListData);

    } catch (error) { console.log(error); }
}

const getplaylisttop = async () => {

    try {
        const listtop = await getPlayListtopApi()

        listtop.playlists.forEach(item => {
            playlisttop.value.push({ name: item.name, id: item.id, picUrl: item.coverImgUrl, playcount: item.playCount })
        })
        

    } catch (error) { console.log(getplaylisttop); }

}

onMounted(() => {
    getplaylist()
    getplaylisttop()
})



const clickHandler = async (tag) => {
    const listtop = await getPlayListHotApi(tag)
    playlisttop.value = []
    listtop.playlists.forEach(item => {
        playlisttop.value.push({ name: item.name, id: item.id, picUrl: item.coverImgUrl, playcount: item.playCount })
    })
    console.log('playlisttop.value', playlisttop.value);
}


</script>


<style lang="scss" scoped>
.playlist-picture {
    width: 80vw;
    height: 300px;
    background-color: skyblue;
    border-radius: 20px;
    margin-left: 45px;
    box-sizing: border-box;
    margin-bottom: 20px;

    img {
        width: 300px;
        height: 300px;
        padding: 20px 20px;
    }
}

.playlist-content {
    span {
        margin-left: 80px;
        color: #fff;
        cursor: pointer;
        &:hover {
            color: red;
        }
    }

}


.el-card__body {
    &>img {
        width: 350px;
        height: 200px;
    }
}

.playlist-box {
    width: 400px;
    height: 300px;
    float: left;
    margin: 15px 20px;
    background-color: #ccc;
    position: relative;
}

.playlist-box:hover .playlist-imgbox-icon {
    opacity: 1;
}

.playlist-imgbox-icon {
    background-color: #fff;
    height: 3.5vw;
    width: 3.5vw;
    position: absolute;
    border-radius: 50%;
    bottom: 1vw;
    right: 1vw;
    opacity: 0;
    transition: all .5s;

    &>span {
        height: 0;
        width: 0;
        position: absolute;
        border: transparent solid 0.8vw;
        border-left: 1.3vw solid #EC4141;
        top: 0;
        bottom: 0;
        left: 1.2vw;
        margin: auto;
    }

}
</style>

